groupDiaIsShow<template>
  <div class="groupRolesControl">
    <el-card>
      <el-button type="primary" @click="addGroupTab">添加用户组</el-button>
      <el-table
        class="groupTab"
        :data="groupTab"
        stripe
        border
        style="width: 100%;"
      >
        <el-table-column prop="name" label="身份" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="editGroup(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              type="warning"
              @click="deleteGroup(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="用户组编辑" :visible.sync="groupDiaIsShow" class="diaForm">
      <el-form
        ref="groupForm"
        :model="groupForm"
        :rules="groupRules"
        label-width="140px"
      >
        <el-form-item label="身份" prop="name">
          <el-input
            v-model="groupForm.name"
            type="text"
            placeholder="请输入要添加的用户组名称"
          />
        </el-form-item>
        <el-form-item label="菜单">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="id"
            :props="defaultProps"
            show-checkbox
            :default-expanded-keys="default_expanded_keys"
            :default-checked-keys="default_checked_keys"
            :check-strictly="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="changeGroup('groupForm', groupEditType)"
          >确认</el-button>
          <el-button @click="groupDiaIsShow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-card>
      <el-button type="primary" @click="addRolesTab">添加权限</el-button>
      <el-table
        class="rolesTab"
        :data="rolesTab"
        stripe
        border
        size="mini"
      >
        <el-table-column prop="name" label="身份" />
        <el-table-column prop="app" label="app" />
        <el-table-column prop="controller" label="controller" />
        <el-table-column prop="action" label="action" />
        <el-table-column prop="method" label="method" />
        <el-table-column prop="is_menu" label="是否是菜单" />
        <el-table-column prop="pid" label="父级" />
        <el-table-column prop="index" label="序号" />
        <el-table-column prop="common" label="公共权限" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editRoles(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              type="warning"
              size="mini"
              @click="deleteRoles(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="权限编辑" :visible.sync="rolesDiaIsShow" class="diaForm">
      <el-form
        ref="rolesForm"
        :model="rolesForm"
        :rules="rolesRules"
        label-width="140px"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input
            v-model="rolesForm.name"
            type="text"
            placeholder="请输入要添加的权限名称"
          />
        </el-form-item>
        <el-form-item label="app" prop="app">
          <el-input
            v-model="rolesForm.app"
            placeholder="admin"
            type="text"
          />
        </el-form-item>
        <el-form-item label="controller" prop="controller">
          <el-input
            v-model="rolesForm.controller"
            type="text"
          />
        </el-form-item>
        <el-form-item label="action" prop="action">
          <el-input
            v-model="rolesForm.action"
            type="text"
          />
        </el-form-item>
        <el-form-item label="method" prop="method">
          <el-select v-model="rolesForm.method" placeholder="请选择">
            <el-option
              v-for="item in methodOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单" prop="is_menu">
          <el-switch
            v-model="rolesForm.is_menu"
            active-color="#13ce66"
          />
        </el-form-item>
        <el-form-item label="父级" prop="pid">
          <el-select v-model="rolesForm.pid" placeholder="请选择">
            <el-option
              v-for="item in rolesMenuTab"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="序号" prop="index">
          <el-input-number v-model="rolesForm.index" controls-position="right" :min="0" :max="100" :step="10" />
        </el-form-item>
        <el-form-item label="公共权限" prop="common">
          <el-switch
            v-model="rolesForm.common"
            active-color="#13ce66"
          />
        </el-form-item>
        <!-- <el-form-item label="菜单">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="id"
            :props="defaultProps"
            show-checkbox
            :default-expanded-keys="default_expanded_keys"
            :default-checked-keys="default_checked_keys"
            :check-strictly="false"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            @click="changeRoles('rolesForm', rolesEditType)"
          >确认</el-button>
          <el-button @click="rolesDiaIsShow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import { getGroups, getRoles } from '@/api/grouprole'
// import { asyncRoutes, currencyRoutes } from '@/router'
export default {
  data() {
    return {
      groupTab: [],
      rolesTab: [],
      rolesMenuTab: [],
      groupDiaIsShow: false,
      rolesDiaIsShow: false,
      groupForm: {},
      rolesForm: {
        app: 'admin',
        controller: 'Product',
        action: 'Product',
        method: 'GET',
        is_menu: false,
        pid: 0,
        index: 0,
        common: false
      },
      groupEditType: 'update',
      rolesEditType: 'update',
      rolesRules: {
        name: [{
          required: true,
          message: '请输入权限名称',
          trigger: 'blur'
        }],
        is_menu: [{
          required: true,
          message: '请输入app',
          trigger: 'blur'
        }],
        method: [{
          required: true,
          message: '请输入method',
          trigger: 'blur'
        }],
        pid: [{
          required: true,
          message: '请选择父级菜单',
          trigger: 'blur'
        }],
        index: [{
          required: true,
          message: '请填写序号',
          trigger: 'blur'
        }],
        common: [{
          required: true,
          message: '请选择公共字段',
          trigger: 'blur'
        }]
      },
      groupRules: {
        name: [{
          required: true,
          message: '请输入要添加的身份名称',
          trigger: 'blur'
        }]
      },
      editIndex: 0,
      // allRoute: [...currencyRoutes, ...asyncRoutes],
      treeData: [],
      default_expanded_keys: [],
      default_checked_keys: [],
      defaultProps: {
        label: 'label',
        children: 'children'
      },
      methodOptions: [{
        value: 'GET',
        label: 'GET'
      }, {
        value: 'POST',
        label: 'POST'
      }, {
        value: 'PATCH',
        label: 'PATCH'
      }, {
        value: 'PUT',
        label: 'PUT'
      }, {
        value: 'DELETE',
        label: 'DELETE'
      }, {
        value: 'OPTIONS',
        label: 'OPTIONS'
      }, {
        value: 'NULL',
        label: 'NULL'
      }]
    }
  },
  created() {
    this._getGroups()
    this._getRoles()
    // this.treeData = this.getTreeData(this.allRoute)
  },
  methods: {
    // __init() {
    //   this.__initRolesForm()
    // },
    __initRolesForm() {
      this.$set(this.rolesForm, 'app', 'admin')
      this.$set(this.rolesForm, 'controller', 'Product')
      this.$set(this.rolesForm, 'action', 'Product')
      this.$set(this.rolesForm, 'method', 'GET')
      this.$set(this.rolesForm, 'is_menu', false)
      this.$set(this.rolesForm, 'pid', 0)
      this.$set(this.rolesForm, 'index', 0)
      this.$set(this.rolesForm, 'common', false)
    },
    _getGroups() {
      this.$store.dispatch('admin/getGroups').then((res) => {
        this.groupTab = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    _getRoles() {
      this.$store.dispatch('admin/getRoles').then((res) => {
        this.treeData = res.data.tree
        this.rolesTab = res.data.default
        this.rolesMenuTab = res.data.menu
        this.default_expanded_keys = res.data.ids
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    deleteGroup(group_id) {
      this.$confirm('删除改用户组会一并删除相关权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // console.log(group_id)
          this.$store.dispatch('admin/deleteGroup', {
            group_id
          }).then((res) => {
            this._getGroups()
            this.loading = false
            this.groupDiaIsShow = false
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
            return false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addGroupTab() {
      this.groupDiaIsShow = true
      this.groupEditType = 'add'
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])
        this.default_checked_keys = []
      })
      this.$set(this.groupForm, 'id', null)
      this.$set(this.groupForm, 'name', null)
    },
    addRolesTab() {
      this.rolesDiaIsShow = true
      this.rolesEditType = 'add'
      // this.rolesForm = {}
    },
    editGroup(index, row) {
      // console.log(row)
      if (Array.isArray(row.role_ids)) {
        this.default_checked_keys = row.role_ids
      } else {
        this.default_checked_keys = []
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys([])
        })
      }
      this.groupDiaIsShow = true
      this.editIndex = index
      this.groupEditType = 'update'
      this.$set(this.groupForm, 'id', row.id)
      this.$set(this.groupForm, 'name', row.name)
    },
    changeGroup(form, type) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const treeKeys = this.$refs.tree.getCheckedKeys()
          if (type === 'update') {
            const treeStr = treeKeys.join(',')
            // console.log(this.groupForm)
            this.$store.dispatch('admin/putGroup', {
              group_id: this.groupForm.id,
              group_name: this.groupForm.name,
              role_ids: treeStr
            }).then((res) => {
              this._getGroups()
              this.loading = false
              this.groupDiaIsShow = false
              this.$message({
                type: 'success',
                message: res.msg
              })
            }).catch(() => {
              this.loading = false
              return false
            })
          } else if (type === 'add') {
            const treeStr = treeKeys.join(',')
            this.$store.dispatch('admin/postGroup', {
              group_name: this.groupForm.name,
              role_ids: treeStr
            }).then((res) => {
              this._getGroups()
              this.loading = false
              this.groupDiaIsShow = false
              this.$message({
                type: 'success',
                message: res.msg
              })
            }).catch(() => {
              this.loading = false
              return false
            })
          }
        } else return
      })
    },
    editRoles(index, row) {
      // console.log(row)
      // if (Array.isArray(row.role_ids)) {
      //   this.default_checked_keys = row.role_ids
      // } else {
      //   this.default_checked_keys = []
      //   this.$nextTick(() => {
      //     this.$refs.tree.setCheckedKeys([])
      //   })
      // }
      this.rolesDiaIsShow = true
      this.rolesEditType = 'update'
      this.$set(this.rolesForm, 'id', row.id)
      this.$set(this.rolesForm, 'name', row.name)
      this.$set(this.rolesForm, 'app', row.app)
      this.$set(this.rolesForm, 'controller', row.controller)
      this.$set(this.rolesForm, 'action', row.action)
      this.$set(this.rolesForm, 'method', row.method)
      this.$set(this.rolesForm, 'is_menu', row.is_menu === '是')
      this.$set(this.rolesForm, 'pid', row.pid)
      this.$set(this.rolesForm, 'index', row.index)
      this.$set(this.rolesForm, 'common', row.common === '是')
    },
    changeRoles(form, type) {
      // console.log(this.rolesForm, type)
      this.$refs[form].validate(valid => {
        if (valid) {
          if (type === 'update') {
            // console.log(this.groupForm)
            const data = {}
            data.role_id = this.rolesForm.id
            data.role_name = this.rolesForm.name
            data.role_app = this.rolesForm.app
            data.role_controller = this.rolesForm.controller
            data.role_action = this.rolesForm.action
            data.role_method = this.rolesForm.method
            data.role_is_menu = this.rolesForm.is_menu === true ? '1' : '0'
            data.role_common = this.rolesForm.common === true ? '1' : '0'
            data.role_index = this.rolesForm.index
            data.role_pid = this.rolesForm.pid
            this.$store.dispatch('admin/putRoles', data).then((res) => {
              this._getRoles()
              this.__initRolesForm()
              this.loading = false
              this.rolesDiaIsShow = false
              this.$message({
                type: 'success',
                message: res.msg
              })
            }).catch(() => {
              this.loading = false
              return false
            })
          } else if (type === 'add') {
            var data = {}
            data.role_name = this.rolesForm.name
            data.role_app = this.rolesForm.app
            data.role_controller = this.rolesForm.controller
            data.role_action = this.rolesForm.action
            data.role_method = this.rolesForm.method
            data.role_is_menu = this.rolesForm.is_menu === true ? '1' : '0'
            data.role_common = this.rolesForm.common === true ? '1' : '0'
            data.role_index = this.rolesForm.index
            data.role_pid = this.rolesForm.pid
            // console.log(data)
            this.$store.dispatch('admin/postRoles', data).then((res) => {
              this._getRoles()
              this.__initRolesForm()
              this.loading = false
              this.rolesDiaIsShow = false
              this.$message({
                type: 'success',
                message: res.msg
              })
            }).catch(() => {
              this.loading = false
              return false
            })
          }
        } else return
      })
    },
    deleteRoles(role_id) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // console.log(role_id)
          this.$store.dispatch('admin/deleteRoles', {
            role_id
          }).then((res) => {
            this._getRoles()
            this.loading = false
            this.rolesDiaIsShow = false
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
            return false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style scoped lang="scss">
.groupTab,
.rolesTab {
    margin-top: 30px;
}
.groupRolesControl .groupTab .el-button,
.groupRolesControl .rolesTab .el-button {
    padding: 8px 18px;
    font-size: 12px;
}
.diaForm {
    .el-input {
        width: 350px;
    }
}
.diaForm .el-form-item__label {
    padding-right: 12px;
}
</style>
